<template>
  <div class="navHeader">
    <div class="container">
      <div class="header-nav">
        <img src="../assets/logo.png" alt="" class="nav-logo" />
        <li class="nav-option" @click="goIndex">首页</li>
        <li class="nav-option" @click="goProduct">商店</li>
        <li class="search">
          <el-autocomplete
            v-model="state"
            :fetch-suggestions="querySearchAsync"
            :placeholder="defaultSearch"
            @select="handleSelect"
            @change="getSearchResult(state)"
          ></el-autocomplete>
          <i @click="goDetailPage()" class="el-icon-search searchIcon"></i>
        </li>
      </div>
      <ul class="header-userInfo">
        <li class="userInfo-option" @click="goLogin" v-if="!isLogin">登录</li>
        <li class="userInfo-option avater" @click="goPerson" v-else>
          <el-avatar :src="circleUrl"></el-avatar>
          <ul class="personList">
            <li @click.stop="goOrder">我的订单</li>
            <li @click.stop="goCart">查看购物车</li>
            <li @click.stop="goAddress">修改用户地址</li>
            <li @click.stop="goReviseUser">修改用户信息</li>
            <li @click.stop="userLogout">退出登录</li>
          </ul>
        </li>
        <li class="userInfo-option" @click="goOrder">我的订单</li>
        <li class="userInfo-option" @click="goCart">
          我的购物车 <i class="el-icon-shopping-cart-1"></i>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import { getGoodsSearch, getGoods } from "../assets/request.js";
export default {
  name: "NavHeader",
  data() {
    return {
      flag: false,
      restaurants: [],
      state1: "",
      circleUrl: "",
      goodsSearch: [],
      restaurants: [],
      state: "",
      timeout: null,
      curId: 0,
      defaultSearch: "",
      goods: [],
      user: {},
    };
  },
  methods: {
    ...mapMutations("userOption", ["logout"]),
    // 用户退出
    userLogout() {
      sessionStorage.removeItem("token");
      this.logout();
      this.getUser();
      this.$message({
        message: "你已经退出登录",
        type: "success",
        duration: 800,
      });
    },

    // 搜索
    async getSearchResult(str) {
      const res = await getGoodsSearch({ name: str });
      res.data.result.rows.forEach((item) => {
        this.goodsSearch.push({ value: item.name, id: item.id });
      });
    },
    querySearchAsync(queryString, cb) {
      this.getSearchResult();
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(this.goodsSearch);
      }, 3000 * Math.random());
    },
    createStateFilter(queryString) {
      return (state) => {
        return (
          state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
    handleSelect(item) {
      this.curId = item.id;
    },
    goDetailPage() {
      if (!this.curId) {
        this.curId = this.goods[0].id;
      }
      console.log(this.curId);
      this.goDetail(this.curId);
    },

    async getDefaultSearch() {
      const resGoods = await getGoods();
      this.goods = resGoods.data.result.rows;
      this.defaultSearch = this.goods[0].name;
    },
    goLogin() {
      this.$router.push({ name: "login" });
    },
    goIndex() {
      this.$router.push({ name: "home" });
    },
    goProduct() {
      this.$router.push({ name: "product" });
    },
    goCart() {
      this.$router.push({ name: "cart" });
    },
    goPerson() {
      this.$router.push({ name: "person" });
    },
    goOrder() {
      this.$router.push({ name: "orderlist" });
    },
    goAddress() {
      this.$router.push({ name: "address" });
    },
    goDetail(goodId) {
      this.$router.push({
        name: "detail",
        params: {
          id: goodId,
        },
      });
    },
    getUser() {
      this.user = JSON.parse(sessionStorage.getItem("user"));
      if (this.user) {
        this.circleUrl = this.user.header_img;
      }
    },
  },
  computed: {
    ...mapState("userOption", ["isLogin", "username"]),
  },

  mounted() {
    this.getDefaultSearch();
    this.getUser();
  },
};
</script>

<style lang="scss" scoped>
.navHeader {
  width: 100%;
  height: 100%;
  background-color: #2f333a;
  color: white;
  font-size: 16px;
  li {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 20px;
    cursor: pointer;
  }
  .nav-option:hover {
    background-color: white;
    color: #2f333a;
  }
  .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 1200px;
    height: 60px;
    margin: 0 auto;
    .header-nav {
      display: flex;
      justify-content: start;
      align-items: center;
      height: 100%;
      .nav-logo {
        width: 30px;
        height: 30px;
        padding: 0 20px;
      }
      .search {
        position: relative;
        margin: 0 20px;
        .searchIcon {
          position: absolute;
          right: 5px;
          bottom: 50%;
          transform: translate(-100%, 50%);
          font-size: 24px;
          color: #2f333a;
        }
      }
    }
    .header-userInfo {
      position: relative;
      display: flex;
      justify-content: start;
      align-items: center;
      height: 100%;
      i {
        margin-left: 5px;
      }
      .personList {
        display: none;
        position: absolute;
        // height: 200px;
        background-color: white;
        box-shadow: 0 5px 10px lightgray;
        top: 100%;
        left: 0;
        z-index: 10000;
        li {
          display: flex;
          align-items: center;
          padding: 0 30px;
          height: 50px;
          z-index: 10000;
          color: black;
        }
        li:hover {
          color: white;
          background-color: #2f333a;
        }
      }
      .avater:hover .personList {
        display: block;
      }
    }
  }
}
</style>
